<h2 class="sub-header">新增联系人</h2>
<form #formMy="ngForm" (submit) = "addContact()">
  <div class="form-group">
    <label for="exampleInputName">姓名</label>
    <input 
    type="text" 
    class="form-control" 
    id="exampleInputName" 
    placeholder="Name"
    name="Name"
    #Name = "ngModel"
    Name="true"
    required
    [(ngModel)]="fromData.name">
    <div *ngIf="Name.invalid && (Name.dirty || Name.touched)"
            class="alert alert-danger">
        <div *ngIf="Name.errors.required">
             姓名不能为空！
        </div>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱</label>
    <input
     type="email" 
     class="form-control" 
     id="exampleInputEmail1"
     placeholder="Email"
     name="email"
     #email = "ngModel"
     required
     email="true"
    [(ngModel)]="fromData.email">
    <div *ngIf="email.invalid && (email.dirty || email.touched)"
            class="alert alert-danger">
        <div *ngIf="email.errors.required">
             邮箱不能为空！
        </div>
        <div *ngIf="email.errors.email">
             无效邮箱！
        </div>
      </div>
  </div>
  <div class="form-group">
    <label for="exampleInputPhoneNumber">电话</label>
    <input type="text" 
    class="form-control" 
    id="exampleInputPhoneNumber" 
    placeholder="PhoneNumber"
    name="phone"
    maxlength="11"
    minlength="7"
    required
    #phone = "ngModel"
    phone="true"
    [(ngModel)]="fromData.phone">
    <div *ngIf="phone.invalid && (phone.dirty || phone.touched)"
            class="alert alert-danger">
        <div *ngIf="phone.errors.required">
             电话不能为空！
        </div>
        <div *ngIf="phone.errors.minlength">
             电话不能少于7位！
        </div>
        <div *ngIf="phone.errors.maxlength">
             电话不能大于11位！
        </div>
      </div>
  </div>
  <button [disabled]="!formMy.form.valid" type="submit" class="btn btn-info">创建</button>
</form>